<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>咨询接待</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-button type="primary" @click="openAddConsulterDialog">添加咨询者</el-button>
      </el-col>
      <el-col :span="4" :offset="16">
        <el-input placeholder="请输入姓名" clearable v-model="cname" @clear="search">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table
        :data="consulterList"
        style="width: 100%;text-align: center">
      <el-table-column label="编号" type="index" align="center"></el-table-column>
      <el-table-column
          prop="cname"
          label="咨询者"
          align="center">
      </el-table-column>
      <el-table-column
          prop="ctel"
          label="联系电话"
          align="center">
      </el-table-column>
      <el-table-column
          prop="csex"
          label="性别"
          align="center">
      </el-table-column>
      <el-table-column
          prop="cage"
          label="年龄"
          align="center">
      </el-table-column>
      <el-table-column
          prop="caddress"
          label="现居住地址地址"
          align="center">
      </el-table-column>
      <el-table-column
          prop="healthy"
          label="身体状况"
          align="center">
      </el-table-column>
      <el-table-column
          prop="required"
          label="入院要求"
          align="center">
      </el-table-column>
      <el-table-column
          prop="inputer"
          label="采集人"
          align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
              style="margin-left: 10px"
              size="mini"
              @click="openEdit(scope.row)">编辑
          </el-button>
          <el-button
              style="margin-top: 5px"
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6 , 12, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>

<!--    添加咨询者-->
    <el-dialog title="添加咨询者" :visible.sync="addConsulterDialogVisible"
               width="50%" @close="addConsulterFormClose" :close-on-click-modal="false">
      <el-form
          :model="addConsulterForm"
          :rules="addConsulterFormRules"
          ref="addConsulterFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="咨询者" prop="cname">
          <el-input v-model="addConsulterForm.cname"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="ctel">
          <el-input v-model="addConsulterForm.ctel"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="csex">
          <el-select v-model="addConsulterForm.csex" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="cage">
          <el-input v-model="addConsulterForm.cage"></el-input>
        </el-form-item>
        <el-form-item label="现居住地址" prop="caddress">
          <el-input v-model="addConsulterForm.caddress"></el-input>
        </el-form-item>
        <el-form-item label="老人身体状况" prop="healthy">
          <el-input v-model="addConsulterForm.healthy"></el-input>
        </el-form-item>
        <el-form-item label="入院要求" prop="required">
          <el-input v-model="addConsulterForm.required"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addConsulter">确 定</el-button>
        <el-button @click="addConsulterFormClose">取 消</el-button>
      </span>
    </el-dialog>

<!-- 修改咨询者   -->
    <el-dialog title="修改咨询者" :visible.sync="updateConsulterDialogVisible"
               width="50%" @close="updateConsulterFormClose" :close-on-click-modal="false">
      <el-form
          :model="updateConsulterForm"
          :rules="updateConsulterFormRules"
          ref="updateConsulterFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="咨询者" prop="cname">
          <el-input v-model="updateConsulterForm.cname"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="ctel">
          <el-input v-model="updateConsulterForm.ctel"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="csex">
          <el-select v-model="updateConsulterForm.csex" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="cage">
          <el-input v-model="updateConsulterForm.cage"></el-input>
        </el-form-item>
        <el-form-item label="现居住地址" prop="caddress">
          <el-input v-model="updateConsulterForm.caddress"></el-input>
        </el-form-item>
        <el-form-item label="老人身体状况" prop="healthy">
          <el-input v-model="updateConsulterForm.healthy"></el-input>
        </el-form-item>
        <el-form-item label="入院要求" prop="required">
          <el-input v-model="updateConsulterForm.required"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateConsulter">确 定</el-button>
        <el-button @click="updateConsulterFormClose">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      consulterList:[],
      pageNum: 1,
      pageSize: 3,
      total:9,
      cname:'',
      consulter:{},
      addConsulterDialogVisible:false,
      addConsulterForm:{
        cname:'',
        ctel:'',
        csex:'',
        cage:0,
        caddress:'',
        healthy:'',
        required:'',
        inputer:'',
      },
      addConsulterFormRules:{
        cname: { required: true, message: "请输入姓名", trigger: "blur" },
        ctel: [
            {required: true, message: "请输入联系方式", trigger: "blur"},
            {pattern:  /^1[3456789]\d{9}$/ , message: '请输入正确的手机号', trigger: 'blur'}
        ],
        csex: { required: true, message: "请输入性别", trigger: "blur"},

      },
      updateConsulterDialogVisible:false,
      updateConsulterForm:{
        id:0,
        cname:'',
        ctel:'',
        csex:'',
        cage:0,
        caddress:'',
        healthy:'',
        required:'',
        inputer:'',
      },
      updateConsulterFormRules:{
        cname: { required: true, message: "请输入姓名", trigger: "blur" },
        ctel: [
          {required: true, message: "请输入联系方式", trigger: "blur"},
          {pattern:  /^1[3456789]\d{9}$/ , message: '请输入正确的手机号', trigger: 'blur'}
        ],
        csex: { required: true, message: "请输入性别", trigger: "blur"},

      },
    }
  },
  methods:{
    //增加
    openAddConsulterDialog(){
      this.addConsulterForm = {},
      this.addConsulterDialogVisible = true;
    },
    addConsulterFormClose(){
      this.addConsulterForm = {};
      this.addConsulterDialogVisible = false;
    },
    addConsulter(){
      let url = "/consult/insertConsulter";
      let username = localStorage.getItem("username");
      this.addConsulterForm.inputer = username;
      this.$refs.addConsulterFormRef.validate((val)=>{
        if(val){
          this.$axios.post(url,this.addConsulterForm).then((res)=>{
            if(res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.addConsulterDialogVisible = false;
              this.initConsulterData();
            }else {
              this.$message({
                message: res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        }else {
          alert("请完善信息")
        }
      })
    },
    //修改
    openEdit(consulter){
      this.updateConsulterForm.id = consulter.id;
      this.updateConsulterForm.cname = consulter.cname;
      this.updateConsulterForm.cage = consulter.cage;
      this.updateConsulterForm.ctel = consulter.ctel;
      this.updateConsulterForm.csex = consulter.csex;
      this.updateConsulterForm.caddress = consulter.caddress;
      this.updateConsulterForm.healthy = consulter.healthy;
      this.updateConsulterForm.required = consulter.required;
      this.updateConsulterDialogVisible = true;
    },
    updateConsulterFormClose(){
      this.updateConsulterDialogVisible = false;
    },
    updateConsulter(){
      let url = "/consult/updateConsulter";
      let username = localStorage.getItem("username");
      this.updateConsulterForm.inputer = username;
      this.$refs.updateConsulterFormRef.validate((val)=>{
        if(val){
          this.$axios.post(url,this.updateConsulterForm).then((res)=>{
            if(res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.updateConsulterDialogVisible = false;
              this.initConsulterData();
            }else {
              this.$message({
                message: res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        }else {
          alert("请完善信息")
        }
      })
    },
    handleDelete(consulter){
      let url = "/consult/deleteConsulter";
      let username = localStorage.getItem("username");
      consulter.inputer = username;
      this.$axios.post(url,consulter).then((res)=>{
        if(res.data.code == 200){
          this.$message({
            message: res.data.msg,
            type:'success',
            duration:1000
          });
          this.initConsulterData();
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    search() {
      this.pageNum = 1;
      this.initConsulterData();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNum = 1;
      this.initConsulterData();
    },
    handleCurrentChange(newPage) {
      //alert(newPage);
      this.pageNum = newPage;
      this.initConsulterData();
    },
    initConsulterData(){
      let url = "/consult/selectConsulter?now="+this.pageNum+"&size="+this.pageSize+"&cname="+this.cname;
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.consulterList = res.data.data.list;
          this.total = res.data.data.total;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    }
  },
  created() {
    this.initConsulterData();
  }
}
</script>

<style scoped>

</style>